<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>报价配置管理</title>
    <link rel="stylesheet" type="text/css" href="../ui/themes/black/easyui.css">
    <link rel="stylesheet" type="text/css" href="../ui/themes/icon.css">
    <script type="text/javascript" src="../ui/jquery.min.js"></script>
    <script type="text/javascript" src="../ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../ui/easyloader.js"></script>
    <script type="text/javascript">
        easyloader.theme = "black";
        $(document).ready(function () {
            $('#menu').tree({
                url: 'menu_tree.json',
                method: 'get',
                animate: true,
                onClick: function (node) {
                    //判断是否是叶子节点
                    if ($('#menu').tree('isLeaf', node.target)) {
                        addTab(node.text, node.attributes.url);
                    }
                }
            });

            function addTab(title, href, icon) {
                var tt = $('#tabs');
                //如果tab已经存在,则选中并刷新该tab
                if (tt.tabs('exists', title)) {
                    tt.tabs('select', title);
                    refreshTab({tabTitle: title, url: href});
                } else {
                    if (href) {
                        var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:99%;height:99%;"></iframe>';
                    } else {
                        var content = '<h1>此功能暂未实现~</h1>';
                    }
                    tt.tabs('add', {
                        title: title,
                        closable: true,
                        content: content,
                        iconCls: icon || ''
                    });
                }
            }

            function refreshTab(cfg) {
                var refresh_tab = cfg.tabTitle ? $('#tabs').tabs('getTab', cfg.tabTitle) : $('#tabs').tabs('getSelected');
                if (refresh_tab && refresh_tab.find('iframe').length > 0) {
                    var _refresh_ifram = refresh_tab.find('iframe')[0];
                    var refresh_url = cfg.url ? cfg.url : _refresh_ifram.src;
                    _refresh_ifram.contentWindow.location.href = refresh_url;
                }
            }

        });


        function msg() {
            using(['dialog', 'messager'], function () {
                $('#dd').dialog({
                    title: '消息',
                    width: 300,
                    height: 200
                });
                $.messager.show({
                    title: 'info',
                    msg: '欢迎使用配Groovy脚本配置中心！',
                    timeout: 1000
                });
            });
        }
    </script>
</head>
<body class="easyui-layout" onload="msg()">

<div data-options="region:'north',border:true" style="height:60px;background:#666;text-align: center;">
    <h2>Groovy脚本配置中心</h2>
</div>

<div data-options="region:'west',border:true" title="菜单" style="width:200px;">
    <div class="easyui-accordion" data-options="fit:true,border:false">
        <div title="配置管理" style="padding:10px;" data-options="selected:true">
            <ul id="menu">
            </ul>
        </div>
        <div title="账户管理" style="padding:10px;">
        </div>
        <div title="用户组管理" style="padding:10px">
        </div>
    </div>
</div>
<div data-options="region:'center',title:'内容'">
    <div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">
        <div title="Home" style="padding:10px">
            <h1 style="text-align: center">欢迎</h1>
        </div>
    </div>
</div>
</body>
</html>